var $ ={
	one(slt:string):HTMLElement{
		return document.querySelector(slt) as HTMLElement;
	},
	
	all(slt:string):NodeListOf<HTMLElement>{
		return document.querySelectorAll(slt);
	},
}

// 弹幕类
class Danmu{

	strackNmb:number;//轨道数
	trackBox:HTMLElement;//轨道盒子

	constructor(){
		this.strackNmb = 10;
		this.trackBox = $.one(".track-box");

		// 生成轨道
		this.setStrack();
		// 暂停
		this.pause();
	}

	// 创建轨道
	setStrack(){

		//单个轨道高度
		let height = Math.floor(this.trackBox.offsetHeight / this.strackNmb);

		// 生成轨道
		let strackHtml = "";
		for(let n=0; n<this.strackNmb; n++){
			strackHtml += `<li style="line-height:${height}px;height:${height}px"></li>`;
		}
		this.trackBox.innerHTML = strackHtml;

	}


	createOne(text:string){
		// 选择轨道
		let sn = Danmu.rand(this.strackNmb, 0);//随机取轨道数
		let lis = this.trackBox.querySelectorAll("li");

		// 创建一个
		let one = document.createElement('span');
		one.innerHTML = text+" <b data-zan='0' class='zan'></b>";
		one.dataset.left = "0";//String(this.trackBox.offsetWidth);
		one.style.color = Danmu.color();
		one.style.fontSize = Danmu.rand(26, 16)+"px";
		lis[sn].append(one);

		// 移动
		this.move(one);
	}


	// 移动一条弹幕
	move(one:HTMLElement){

		// 移动速度
		let speed = one.dataset.speed || Danmu.rand(150,75);

		let timer = setInterval(()=>{

			let left = Number(one.dataset.left);//到左侧的距离

			// 到最左侧，停止并移除弹幕
			if(left<-(this.trackBox.offsetWidth+one.offsetWidth)) {
				clearInterval(timer);
				one.remove();
			}

			//存当前节点的定时器
			one.dataset.timer = String(timer);
			one.dataset.speed = speed as string;

			// 左移
			left-=20;
			one.dataset.left = String(left);
			one.style.transform =  "translateX("+(left-20)+ "px"+")";

		}, speed as number);

	/* 
		//left距离实现
		let timer = setInterval(()=>{

			// 到最左侧，停止并移除弹幕
			if(one.offsetLeft<0) {
				clearInterval(timer);
				one.remove();
			}
			//存当前节点的定时器
			one.dataset.timer = String(timer);
			one.dataset.speed = speed as string;

			// 左移
			one.style.left = one.offsetLeft-20 + "px";

		}, speed as number); 
	*/

	}

	// 点赞
	good(one:HTMLElement){
		// let n = Number(one.dataset.n || 0) +1;//点赞数

		let b = one.querySelector("b") as HTMLElement;
		let zan = String(Number(b.dataset.zan)+1);
		b.dataset.zan = zan;
		b.innerHTML = zan;
	}

	// 暂停
	pause(){
		this.trackBox.onmouseover = event=>{
			let one = event.target as HTMLElement;
			if(one.nodeName!='SPAN') return;

			// 清除定时器
			let timer = Number(one.dataset.timer);
			clearInterval(timer);
		}

		this.trackBox.onmouseout = event=>{
			let one = event.target as HTMLElement;
			if(one.nodeName!='SPAN') return;
			// 重新移动
			this.move(one);
		}

		this.trackBox.onclick = event=>{
			let one = event.target as HTMLElement;
			if(one.nodeName!='SPAN') return;

			// 清除定时器
			let timer = Number(one.dataset.timer);
			clearInterval(timer);

			// 点赞
			this.good(one);
		}

	}


	// 生成随机数
	static rand(max:number, min:number) :number {
		return Math.floor(Math.random()*(max-min))+min;
	}

	// 生成随机色
	static color():string  {
		return `rgb(
			${Danmu.rand(250, 200)},
			${Danmu.rand(250, 0)},
			${Danmu.rand(250, 0)}
		)`;
	}


}


// 发送弹幕类 =========================================
// 发送弹幕中弹幕文字约束
interface DanmuText{
	stat:boolean;
	text:string;
}

// 发送弹幕类
class SendDanmu{

	static readonly filterWords='b|草|妈';

	private static instance:SendDanmu|null = null;

	// 单例模式
	static self() :SendDanmu{
		if(!SendDanmu.instance){
			SendDanmu.instance = new SendDanmu();
		}

		return SendDanmu.instance;
	}


	// 取得弹幕内容
	getText():DanmuText{

		// 取得原始文字
		let input = $.one("#myDanmu") as HTMLInputElement;
		let text = input.value;

		// 过滤两端空格
		text = text.replace(/^\s*|\s*$/g, '');


		// 判断:错误
		if(text.length<2 || text.length>40) return {stat:false, text:"请输入2~40个字符"};

		// 过滤:关键字
		let filterRegexp = new RegExp(SendDanmu.filterWords, 'ig');
		text = text.replace(filterRegexp, '*');

		return {stat:true, text};

	}

	sendOne(){

		let rText = this.getText();

		if(!rText.stat) {
			alert(rText.text);
			return;
		}

		dm.createOne(rText.text);
	}

	// 提交弹幕
	submit(dm:Danmu){

		// 取得弹幕内容
		$.one("#myDanmuButton").onclick = ()=>{
			this.sendOne();
		}

		// 取得弹幕内容
		$.one("#myDanmu").onkeyup = (event)=>{
			// console.log(event);
			if(event.keyCode==13){
				this.sendOne();
			}
		}


	}
}



let dm = new Danmu;
// dm.one( $.one("#active") );//测试一条

SendDanmu.self().submit(dm);

// 自动发射器
// setInterval(()=>{
// 	dm.createOne('弹幕大军来了！');
// }, 5000);

